<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1" />
<!--用IE的最高版本浏览网页，以防低版本IE不支持部分css3属性-->
<title>工程界-认证视频</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!--意思是使网页的宽度强制适应不同服务窗口的宽度（宽度自适），且用户不能够随意缩放网页-->
<meta name="description" content="" />
<!--关键字的描述内容(description)-->
<meta name="keywords" content="">
<!--关键字(keywords)-->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/hytopheader.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jqPaginator.js"></script>
<!--<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>-->
<!--<script type="text/javascript" src="js/reg.js"></script>-->
<!--[if lt IE9]> 
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
<script>
	/**
	 * 跳转封装
	 */
	//document.getElementById("mainType1").style.backgroundColor = 'red';
	var curMainTypeId = ${mainTypeId == null ? 'null' : mainTypeId};
	var curChildTypeId = ${childTypeId == null ? 'null' : childTypeId};
	var curOrderMethod = ${orderMethod == null ? 'null' : orderMethod};
	var curIsAudition = ${isAudition == null ? 'null' : isAudition};
	var curPage = ${page == null ? 'null' : page};
	var req = 0;
	function reload(mainTypeId, childTypeId, orderMethod, isAudition, page) {
		/*********这里为了保证后台和前台的数据类型一致***********/
		/******************************************************/
		if (req == 0) {
			return false;
		}
		if (page == null) {
			page = curPage;
		}
		if (page != null) {
			var reloadUrl = 'view/courseList?page=' + page;
			if (mainTypeId != -1) {
				if (mainTypeId != null) {
					reloadUrl += '&mainTypeId=' + mainTypeId;
				} else if (curMainTypeId != null) {
					reloadUrl += '&mainTypeId=' + curMainTypeId;
				}
			}
			if (childTypeId != -1) {
				if (childTypeId != null) {
					reloadUrl += '&childTypeId=' + childTypeId;
				} else if (curChildTypeId != null) {
					reloadUrl += '&childTypeId=' + curChildTypeId;
				}
			}
			if (orderMethod != -1) {
				if (orderMethod != null) {
					reloadUrl += '&orderMethod=' + orderMethod;
				} else if (curOrderMethod != null) {
					reloadUrl += '&orderMethod=' + curOrderMethod;
				}
			}
			if (isAudition != -1) {
				if (isAudition != null) {
					reloadUrl += '&isAudition=' + isAudition;
				} else if (curIsAudition != null) {
					reloadUrl += '&isAudition=' + curIsAudition;
				}
			}

			window.location.href = reloadUrl;
		} else {
			return false;
		}
	}
</script>
</head>
<body>
	<!--头部header开始-->
	<div class="m-topBar">
		<div class="commWidth">
			<div class="m-topBar-item f-clearfix">
				<div class="m-navBar f-fl">
					<a href="">工程界</a> <a href="">工程百科</a> <a href="">工程文库</a> <a
						href="">工程图库</a> <a href="">在线课堂</a> <a href="">百问百答</a> <a
						href="">众包场</a> <a href="">主页空间</a> <a href="">新品展厅</a> <span>
						<i></i>
					</span>
				</div>
				<div class="userLogin f-fr" style="display:none">
					<a href="">登陆 </a>/ <a href="">注册</a>
				</div>
				<div class="m-usermsg f-fr">
					<a href="" class="m-usermsg-first">王小二
						<div class="m-usermsg-list">
							<ul>
								<li>个人主页</li>
								<li>帐号管理</li>
								<li>退出</li>
							</ul>
						</div>
					</a> <a href="" class="m-user-last">消息 (<span> 0 </span>)
					</a>
				</div>

			</div>
		</div>
	</div>
	<!--头部header结束-->
	<!--logo搜索个人中心区域开始-->
	<div class="course-header">
		<div class="commWidth g-width">
			<div class="m-topheader f-clearfix">
				<div class="m-logo f-fl">
					<a href=""><img src="img/ct.png" alt="在线课堂" title="在线课堂" /></a>
				</div>
				<div class="hynew f-fl">
					<ul>
						<li>首页</li>
						<li>认证专区</li>
						<li>设计之路</li>
						<li>设计之路</li>
						<li>精品专区</li>
					</ul>
				</div>
				<div class="m-search f-fl">
					<div class="m-sear">
						<i class="m-sear-i iconfont"></i> <input type="text"
							value="请输入您要搜索的内容" autocomplete="off" />
					</div>
				</div>
				<div class="userActiv f-fr" style="display: none;">
					<i></i> <a href="">个人中心</a>
				</div>
				<div class="loginActive f-fr">
					<i></i> <a href="" class="userpersonal">个人中心
						<div class="personal">
							<ul>
								<li>我的视频</li>
								<li>我的试卷</li>
								<li>收藏</li>
								<li>浏览记录</li>
							</ul>
						</div>
					</a>
				</div>
			</div>
		</div>
	</div>
	<!--logo搜索个人中心区域结束-->
	<div id="main">
		<div class="commWidth">
			<div class="course-content">
				<div class="nav-box">
					<div class="course-nav-hd clearfix">
						<span class="blod"> <a href="javascript:reload(-1,-1,-1,-1,1);">全部课程</a></span>  
						<c:if test="${mainTypeId != null}">
							> <span class="step"><a href="javascript:reload(${mainTypeId},-1,-1,-1,1);">${mainTypeInfo.mainTypeName }</a></span> 
							<c:if test="${childTypeId != null }">
							> <span class="step"><a href="javascript:reload(${mainTypeId},${childTypeId },-1,-1,1);">${childTypeInfo.childTypeName }</a></span>
							</c:if>
						</c:if>
					</div>
					<div class="course-nav-row">
						<span class="hd fl">课程方向：</span>
						<div class="bd">
							<ul>
								<li class="course-nav-item"><a id="mainTypeAll"
									href="javascript:reload(-1,-1,-1,-1,1);">全部</a></li>
								<c:forEach items="${mainTypeList }" var="mainType">
									<li class="course-nav-item"><a
										id="mainType${mainType.mainTypeId}"
										href="javascript:reload(${mainType.mainTypeId},-1,-1,-1,1);"
										onclick="">${mainType.mainTypeName}</a></li>
								</c:forEach>
							</ul>
						</div>
					</div>
					<div class="course-nav-row">
						<span class="hd fl">课程分类：</span>
						<div class="bd">
							<ul>
								<c:choose>
									<c:when test="${childTypeList == null}">
										<li class="course-nav-item"><a>请选择课程方向...</a></li>
									</c:when>
									<c:otherwise>
										<c:forEach items="${childTypeList}" var="childType">
											<li class="course-nav-item"><a
												id="childType${childType.childTypeId}"
												href="javascript:reload(null,${childType.childTypeId},null,null,1);"
												onclick="">${childType.childTypeName}</a></li>
										</c:forEach>
									</c:otherwise>
								</c:choose>
							</ul>
						</div>
					</div>
				</div>
				<div class="nav-tool-bar clearfix">
					<div class="tool-letf fl">
						<a id="orderMethod1"
							href="javascript:reload(null,null,1,null,null);" class="newest">综合排序</a>
						<a id="orderMethod3"
							href="javascript:reload(null,null,3,null,null);" class="newest ">最新</a>
						<a id="orderMethod7"
							href="javascript:reload(null,null,7,null,null);" class="newest">评分</a>
						<a id="orderMethod5"
							href="javascript:reload(null,null,5,null,null);"
							class="price-item-my">价格</a>
						<!--<span class="nav-gap-helper"> | </span>-->
					</div>
					<!--<div class="tool-right fl">
							<a href="">价格区间</a>
							<span></span>
						</div>-->
					<!--<div class="tool-right fr">
							<span class="pager-num">
								<b class="pager-cur">1</b>
								/
								<em class="pager-total"></clipPath>17</em>
							</span>
							<a href="javascript:;" class="hide-text pager-prev">上一页</a>
							<a href="javascript:;" class="hide-text pager-next active">下一页</a>
						</div>-->
				</div>
				<div class="nav-list">
					<ul class="clearfix">
						<c:forEach items="${courseMap.courseList}" var="course">
							<li><a href="view/courseDetail?courseId=${course.courseId }">
									<div class="figure">
										<img src="image/${course.coverUrl}" alt="" />
									</div>
									<h5 class="title">
										${course.courseContent }
										<c:choose>
											<c:when test="${course.price == 0}">
												<span class="fr">免费</span>
											</c:when>
											<c:otherwise>
												<span class="fr">￥${course.price}</span>
											</c:otherwise>
										</c:choose>

									</h5>
									<p class="desc">${course.describes }</p>
									<div class="author-warp">
										<span class="author fl">${course.nickname }</span> <span
											class="time"><fmt:formatDate
												value="${course.updateTime}" pattern="yyyy-MM-dd" /></span> <span
											class="num fr">播放量<em>${course.playTimes}</em></span>
									</div>
							</a></li>
						</c:forEach>
					</ul>
				</div>
				<p id="p1"></p>
				<div class="paginations">
					<ul class="pagination" id="pagination1"></ul>
				</div>

				<script type="text/javascript">
					$.jqPaginator('#pagination1', {
						totalPages : ${courseMap.pageCount},
						visiblePages : 10,
						currentPage : curPage,
						onPageChange : function(num, type) {
							reload(null, null, null, null, num);
							req = 1;
						}
					});
				</script>
			</div>
		</div>
	</div>
	<div class="footer">
		<div>
			<span>请使用者仔细阅读工程界 用户协议 和 隐私政策</span> <span><a
				href="javascript:;">网络违法犯罪举报网站</a></span> <span><a
				href="javascript:;">中国互联网发和不良信息举报中心</a></span>
		</div>
		<p>沪ICP证00099903号</p>
		<p>Coperight©2015-2020engineeringcircle.com All Right Reserved</p>
	</div>
	<c:if test="${childTypeList == null}">
		<script type="text/javascript">
			$("#mainTypeAll").css('background-color', '#5ac0eb');
			$("#mainTypeAll").css('color', 'white');
		</script>
	</c:if>
	<script type="text/javascript">
		if (curMainTypeId != null) {
			$("#mainType" + curMainTypeId).css('background-color', '#5ac0eb');
			$("#mainType" + curMainTypeId).css('color', 'white');
		}
		if (curChildTypeId != null) {
			$("#childType" + curChildTypeId).css('background-color', '#5ac0eb');
			$("#childType" + curChildTypeId).css('color', 'white');
		}
		if (curOrderMethod != null) {
			$("#orderMethod" + curOrderMethod).css('color', '#5ac0eb');
		} else {
			$("#orderMethod" + 1).css('color', '#5ac0eb');
		}
		if (curIsAudition != null) {
		}
		if (curPage != null) {
		}
	</script>
</body>
</html>